<template>
	<view class="container">
		<view class="floating-search-btn" @click="openSearchPopup">
			<u-icon name="search" color="#00B54E" size="25"></u-icon>
			<text>搜索</text>
		</view>

		<view v-for="(item, index) in list" :key="index" class="list-item" @click="goToDetail(item.id)">
			<view class="item-line">
				<text class="label">主体名称:</text>
				<text class="value">{{ item.entityName }}</text>
			</view>
			<view class="item-line">
				<text class="label">法人名称:</text>
				<text class="value">{{ item.legalPerson }}</text>
			</view>
			<view class="item-line">
				<text class="label">联系电话:</text>
				<text class="value">{{ item.phone }}</text>
			</view>
			<view class="item-line">
				<text class="label">所属行业:</text>
				<text class="value">{{ item.industry }}</text>
			</view>
			<view class="item-line">
				<text class="label">生产类型:</text>
				<text class="value">{{ item.productionType }}</text>
			</view>
			<view class="item-line">
				<text class="label">主体地址:</text>
				<text class="value address">{{ item.address }}</text>
			</view>
			<view class="item-line">
				<text class="label">主体类型:</text>
				<text class="value">{{ item.entityType }}</text>
			</view>
			
			<view class="arrow-icon">
				<u-icon name="arrow-right" color="#c0c4cc"></u-icon>
			</view>
		</view>

		<u-loadmore :status="status" />

		<u-popup :show="showSearchPopup" @close="showSearchPopup = false" mode="center" width="85%" border-radius="16">
			<view class="popup-content">

				<view class="form-item">
					<u-checkbox @change="mobileChange" />
					<text class="form-label">手机号码</text>
					<u-input v-model="searchForm.mobile" :disabled="!enableChecked.mobileEnabled" placeholder="请输入手机号码"
						class="form-input" :input-style="inputStyle" />
				</view>

				<view class="form-item">
					<u-checkbox @change="phoneChange" />
					<text class="form-label">联系电话</text>
					<u-input v-model="searchForm.phone" :disabled="!enableChecked.phoneEnabled" placeholder="请输入联系电话"
						class="form-input" :input-style="inputStyle" />
				</view>

				<view class="form-item">
					<u-checkbox @change="licenseStatusChange" />
					<text class="form-label">营业执照</text>
					<view class="form-input selector" @click="openLicensePicker">
						<text>{{ searchForm.licenseStatus || '请选择' }}</text>
						<u-icon name="arrow-down" color="#c0c4cc" size="14"></u-icon>
					</view>
				</view>

				<view class="form-item">
					<u-checkbox @change="entityTypeChange" />
					<text class="form-label">主体类型</text>
					<view class="form-input selector" @click="openEntityTypePicker">
						<text>{{ searchForm.entityType || '请选择' }}</text>
						<u-icon name="arrow-down" color="#c0c4cc" size="14"></u-icon>
					</view>
				</view>

				<u-button type="success" shape="circle" @click="handleSearch">搜索</u-button>
			</view>
		</u-popup>

		<u-action-sheet :show="showLicensePicker && enableChecked.licenseEnabled" :actions="licenseOptions" @select="onLicenseSelect"
			@close="showLicensePicker = false" cancelText="取消"></u-action-sheet>

		<u-action-sheet :show="showEntityTypePicker && enableChecked.entityTypeEnabled" :actions="entityTypeOptions" @select="onEntityTypeSelect"
			@close="showEntityTypePicker = false" cancelText="取消"></u-action-sheet>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				status: 'loadmore',
				page: 1,
				showSearchPopup: false,
				enableChecked: {
					mobileEnabled: false,
					phoneEnabled: false,
					licenseEnabled: false,
					entityTypeEnabled: false,
				},
				searchForm: {
					mobile: '',
					phone: '',
					licenseStatus: '',
					entityType: ''
				},

				showLicensePicker: false,
				licenseOptions: [{
						name: '已上传'
					},
					{
						name: '未上传'
					}
				],
				showEntityTypePicker: false,
				entityTypeOptions: [{
						name: '个体工商户'
					},
					{
						name: '有限公司'
					},
					{
						name: '合作社'
					},
					{
						name: '其他'
					}
				],

				inputStyle: {
					height: '70rpx',
				}
			};
		},
		onLoad() {
			this.fetchList();
		},
		onReachBottom() {
			if (this.status === 'nomore') return;
			this.page++;
			this.fetchList();
		},
		methods: {
			fetchList() {
				const params = {
					page: this.page,
					pageSize: 5
				};
				if (this.enableChecked.mobileEnabled && this.searchForm.mobile) params.mobile = this.searchForm.mobile;
				if (this.enableChecked.phoneEnabled && this.searchForm.phone) params.phone = this.searchForm.phone;
				if (this.enableChecked.licenseEnabled && this.searchForm.licenseStatus) params.licenseStatus = this.searchForm
					.licenseStatus;
				if (this.enableChecked.entityTypeEnabled && this.searchForm.entityType) params.entityType = this.searchForm
					.entityType;

				console.log('搜索参数:', params);

				this.status = 'loading';
				const mockData = [{
						id: 1,
						entityName: '六六六生产主体',
						legalPerson: '六六六',
						phone: '18408248888',
						industry: '农业',
						productionType: '种植+养殖',
						address: '四川省成都市郫都区郫筒街道众创空间',
						entityType: '个体工商户'
					},
					{
						id: 2,
						entityName: '七七七农业公司',
						legalPerson: '七七七',
						phone: '13888889999',
						industry: '农业',
						productionType: '种植',
						address: '四川省绵阳市高新区火炬大道',
						entityType: '有限公司'
					}
				];
				setTimeout(() => {
					if (this.page === 1) this.list = mockData;
					else this.list.push(...mockData);
					this.status = this.page > 2 ? 'nomore' : 'loadmore';
				}, 1000);
			},
			handleSearch() {
				this.showSearchPopup = false;
				this.page = 1;
				this.list = [];
				this.fetchList();
			},
			openSearchPopup() {
				this.showSearchPopup = true;
			},
			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/regulator/member-detail?id=${id}`
				});
			},
			openLicensePicker() {
				if (this.searchForm.licenseEnabled) return;
				this.showLicensePicker = true;
			},
			onLicenseSelect(item) {
				this.searchForm.licenseStatus = item.name;
			},
			openEntityTypePicker() {
				if (this.searchForm.entityTypeEnabled) return;
				this.showEntityTypePicker = true;
			},
			onEntityTypeSelect(item) {
				this.searchForm.entityType = item.name;
			},
			mobileChange(status) {
				this.enableChecked.mobileEnabled = status;
			},
			phoneChange(status) {
				this.enableChecked.phoneEnabled = status;
			},
			licenseStatusChange(status) {
				this.enableChecked.licenseEnabled = status;
			},
			entityTypeChange(status) {
				this.enableChecked.entityTypeEnabled = status;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
	}

	.floating-search-btn {
		position: fixed;
		top: 20rpx;
		right: 30rpx;
		z-index: 99;
		display: flex;
		align-items: center;
		padding: 12rpx 24rpx;
		background-color: white;
		border-radius: 50rpx;
		border: 1px solid #00B54E;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

		text {
			font-size: 26rpx;
			color: #00B54E;
			margin-left: 8rpx;
		}
	}

	.list-item {
		position: relative;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		border-bottom: 1rpx solid #f0f0f0;
	}

	.item-line {
		display: flex;
		align-items: flex-start;
		font-size: 28rpx;
		line-height: 1.6;
		margin-bottom: 20rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.label {
		color: #606266;
		width: 180rpx;
		flex-shrink: 0;
	}

	.value {
		flex: 1;

		&.address {
			word-break: break-all;
		}
	}

	.arrow-icon {
		position: absolute;
		top: 50%;
		right: 10rpx;
	}

	.popup-content {
		padding: 40rpx 30rpx;
		background-color: #fff;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		font-size: 28rpx;

		.form-label {
			color: #303133;
			margin: 0 20rpx;
			width: 150rpx;
		}

		.form-input {
			flex: 1;
			background-color: #f5f5f5;
			border-radius: 8rpx;
			// padding: 0 20rpx !important; // padding 可以在 u-input 的 style 中控制
			height: 70rpx;
		}

		.selector {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;

			.placeholder {
				color: #c0c4cc;
			}
		}
	}
</style>